WPF和Silverlight版Chart 允许您通过AggregateGroupSelector属性创建自定义分组以及聚合函数。下面的示例将引导您创建一个自定义的基于分类进行分组的自定义聚合函数。您将会在您的WPF或Silverlight应用程序中的MainWindow.xaml 页面开始这一过程。
首先,你需要添加一个C1Chart控件至您的应用程序并将其命名为"chart":
XAML |
拷贝代码
|
---|---|
<c1chart:C1Chart Name="chart"></c1chart:C1Chart>
|
然后,添加一个一般的按钮控件,然后设置单击事件如下:
XAML |
拷贝代码
|
---|---|
<Button Content="New Data" Width="100" Click="Button_Click" /> |
切换到代码视图。将下面的语句添加到页面顶部:
C# |
拷贝代码
|
---|---|
using C1.WPF.C1Chart; //或者 using C1.Silverlight.Chart; |
然后,编辑MainWindow()构造函数,它将类似于以下:
C# |
拷贝代码
|
---|---|
public MainWindow()
{
InitializeComponent();
CreateSampleChart();
}
|
添加CreateSampleChart()方法:
C# |
拷贝代码
|
---|---|
void CreateSampleChart()
{
}
|
在CreateSampleChart()方法中,创建一个列表包含项目名称:
C# |
拷贝代码
|
---|---|
var keys = new List<string> { "oranges", "apples", "lemons", "grapes" }; |
然后,添加一个绑定的DataSeries:
C# |
拷贝代码
|
---|---|
for (int i = 0; i < 2; i++) { var ds = new DataSeries() { ItemsSource = SampleItem.CreateSampleData(40), ValueBinding = new Binding() { Path = new PropertyPath("Value") }, Aggregate = Aggregate.Sum, Label = "s" + i }; |
添加AggregateGroupSelector函数以及向图表添加DataSeries的代码。这里,AggregateGroupSelector函数将从SampleItem类返回项目名称,我们将添加下一步:
C# |
拷贝代码
|
---|---|
ds.AggregateGroupSelector = (x, y, o) => { // 来自于类别列表中的索引 return keys.IndexOf(((SampleItem)o).Name); }; chart.Data.Children.Add(ds); } chart.Data.ItemNames = keys; } |
Button_Click事件处理将在其调用new之前清除旧数据,每次用户单机此按钮时,将生成新的随机数据:
C# |
拷贝代码
|
---|---|
private void Button_Click(object sender, RoutedEventArgs e) { chart.Data.Children.Clear(); CreateSampleChart(); } |
最后,添加SampleItem类。这将为您的图表控件创建随机数据:
C# |
拷贝代码
|
---|---|
public class SampleItem { public string Name { get; set; } public double Value { get; set; } static Random rnd = new Random(); public static SampleItem[] CreateSampleData(int cnt) { var names = new string[] { "oranges", "apples", "lemons", "grapes" }; var array = new SampleItem[cnt]; for (int i = 0; i < cnt; i++) { array[i] = new SampleItem() { Value = rnd.Next(1, 10), Name = names[rnd.Next(names.Length)] }; } return array; } } } } |
上面的代码和标记在一个应用程序中,将生成类似于下面的图像: